<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <!--     <meta name="viewport" content="target-densitydpi=device-dpi, width=375px, user-scalable=no"> -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>GXC</title>
    <script src='vue.js'></script>
    <script src='./gxc.js'></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="gxc.css">
    <link rel="stylesheet" href="font-awesome.min.css">
</head>
<style>
    .button_div {
        margin-top: 10px;
    }
</style>

<body>
    <div class="temp">

        <infinite @loading="loading" ref="infinite">
            <!-- 开始 -->

            <top title="GXC" v-on:left="TopLeft" v-on:right="TopRight"></top>
            <!-- 顶部标题栏 √-->

            <search @search="search"></search>
            <!-- 搜索栏 √-->

            <slide>
                <!--   <div slot="slide"></div> -->
            </slide>
            <!--
          左滑
          外面一定要套一个overflow: hidden; 和width 100vw 的的div

          留有slide插槽
          可以自定义左边的内容
          默认高度70px;√
        -->



            <navbar :menulist="navbar_menu">
                <div slot="Navbar_page_1">ssssss</div>

                <div slot="Navbar_page_0">
                    <h1>表单</h1>
                    <ginput type="password" placeholder="请输入验证码"></ginput>
                    <gradio name="xx" :menu="radio" class="check"></gradio>
                    <gradio name="xxs" :menu="radio" class="full"></gradio>
                </div>
            </navbar >
            <!-- 
                :menulist:数组型目录名
                slot：Navbar_page_x：分页插槽√
            -->
            <br>
            
            

            <timeitem t="1699" title="倒计时结束："></timeitem>


            <app scheme="com.PHMall.app://" url="http://ios.ganxiaochuan.top/"></app>

            <gbutton size="lager"></gbutton>
            <br>
            <gbutton btn_color="red"></gbutton>
            <br>
            <gbutton btn_color="red" size='auto'></gbutton>
            <br>
            <gbutton size="small" btn_color="blue"></gbutton>
            <!--
          按钮组件
          有btntxt插槽,用c标签，带入内容
          size:(lager,small,auto,默认中)尺寸
          .btn_div 可以CSS控制颜色 √
        -->
            <br>




            <actionsheet v-on:cancel="cancel" :menulist="list" v-on:selected="chosed">
            </actionsheet>

            <br>

            <actionsheet v-on:cancel="cancel" :menulist="list" v-on:selected="chosed" @click.native="clickActionSheet" ref="ActionSheet">
                <gbutton slot="value">
                    <div slot="btntxt" ref="gbutton">ActionSheetS</div>
                </gbutton>
            </actionsheet>
            <!-- 
                      :menulist:传入一个数组，按键列表
                      第一步先V-on 监听事件，cancel 监听取消的事件，在这里面触发methods事件，等号后面写事件名
                      selected 监听 选中事件，在这里面触发methods事件，等号后面写事件名，返回两个值，
                      第一个值：索引
                      第二个值:内容 
                    -->

            <br>



            <touch v-on:touchstart='touchstart' v-on:touching='touching' v-on:touchend='touchend' monitor='true' v-bind:style="'top:'+y+'px;left:'+x+'px'">
                <gbutton slot="touch" id="touchbtn">
                    <div slot="btntxt">拖动我试试</div>
                </gbutton>
            </touch>

            <br>


            <!--
          v-on:touchstart 监听开始拖动触发的函数，返回鼠标x,y
          v-on:touching 监听拖动中触发的函数，返回鼠标x,y
          v-on:touchend 监听拖动结束触发的函数，返回鼠标x,y
          monitor  是否监听  拖动中的事件，默认false
        -->
            <br>
            <gbutton @click.native="alert_type1()">
                <div slot="btntxt">Alert type 1</div>
            </gbutton>
            <br>
            <gbutton @click.native="alert_type2()">
                <div slot="btntxt">Alert type 2</div>
            </gbutton>
            <!-- 提示 -->
            <br>
            <gbutton @click.native="Toast1()">
                <div slot="btntxt">Toast</div>
            </gbutton>
            <br>
            <gRow>
                <gCol>
                    <p style="width:100%;background:red;color:white;text-align:center;">1</p>
                </gCol>
                <gCol span='5'>
                    <p style="width:100%;background:rgb(255, 251, 0);color:white;text-align:center;">2</p>
                </gCol>
                <gCol span='5'>
                    <p style="width:100%;background:rgb(101, 248, 3);color:white;text-align:center;">3</p>
                </gCol>
                <gCol span='5'>
                    <p style="width:100%;background:rgb(0, 81, 255);color:white;text-align:center;">4</p>
                </gCol>
                <gCol span='5'>
                    <p style="width:100%;background:rgb(217, 3, 236);color:white;text-align:center;">5</p>
                </gCol>
            </gRow>

            <gRow>
                <gCol>
                    <p style="width:100%;background:rgb(217, 3, 236);color:white;text-align:center;">1</p>
                </gCol>
                <gCol>
                    <p style="width:100%;background:rgb(255, 251, 0);color:white;text-align:center;">2</p>
                </gCol>
            </gRow>
            <!-- Tosat,說明在事件里面 -->
        </infinite>


        <!-- 结束 -->
    </div>

    <script>
        Vue.use(gxc)
        var xx = new Vue({
            el: '.temp',
            data: {
                x: '',
                y: '',
                left: '',
                top: '',
                list: ['我是1', '我是2'], //ActionSheet列表
                navbar_menu: ['未使用', '已使用', '已过期'], //navbar 目录
                radio:[
                    {
                        value:"one",
                        text:'one'
                    },
                    {
                        value:'two',
                        text:'two'
                    }
                ]
            },
            methods: {
                search: function(val) {
                    alert(val);
                }, //搜索触发的事件
                clickActionSheet: function() {

                    this.$refs.ActionSheet.show = !this.$refs.ActionSheet.show;
                }, //外部触发ActionSheet
                cancel: function() {
                    this.$alertshow("我点击了取消")
                }, //ActionSheet
                chosed: function(index, val) {
                    /* index：索引
                    val:内容 */
                    switch (index) {
                        case 0:
                            this.$alertshow('我选择了第' + parseInt(index + 1) + '个按钮，触发了回调事件');
                            break;
                        case 1:
                            this.$alertshow('我选择了第' + parseInt(index + 1) + '个按钮，触发了回调事件');
                            break;
                    }

                }, //ActionSheet
                touchstart: function(x, y) {
                    var t = document.getElementById('touchbtn');
                    console.log(t.getBoundingClientRect().left);
                    console.log(t.getBoundingClientRect().top);

                    this.left = x - t.getBoundingClientRect().left;
                    this.top = y - t.getBoundingClientRect().top;
                    console.log('我开始拖动了');

                }, //touch开始
                touching: function(x, y) {

                    this.x = x - this.left;
                    this.y = y - this.top;
                    console.log(x);
                    console.log(y);

                }, //touch中
                touchend: function() {
                        console.log('我结束拖动了');
                    } //touch结束
                    ,
                alert_type1: function() {
                    this.$alertshow({
                        title: '警告',
                        value: '你太帅了',
                        btn: ['确定', '取消'],
                        okcallback: function(index) {
                            console.log(index);
                        },
                        cancelcallback: function(index) {
                            console.log(index);
                        }
                    });
                    /* this.$alertshow('Hi,你看到我了，我是alert') 
                    第一种类型，
                    title：标题
                    value：内容
                    btn：按钮
                    ok：点击确定的方法
                    cancel：点击取消的方法
                     */
                },
                alert_type2: function() {
                    this.$alertshow('Hi,你看到我了，我是alert');

                    /* this.$alertshow('Hi,你看到我了，我是alert') 
                    第二种类型，只传一句话，只有一个确定按钮 */

                },
                Toast1: function() {
                    this.$Toast('你帅死了', 'loading');
                    /*  Toast(value,type)
                     value:可以为空,但一定要赋值
                     type:目前提供success,error,loading */
                },
                TopLeft: function() {
                    alert("left");
                },
                TopRight: function() {
                    alert("right");
                },
                loading: function() {
                    setTimeout(() => {
                        this.$refs.infinite.infinite_reset();
                    }, 2000);
                }


            },
            mounted: function() {
                console.log(this.radio);
            }
        })
    </script>
</body>

</html>